<template>
  <div class="turnTable">
    <div class="mask1-1" v-if="mask1">
      <div class="mask1-2">
        <p class="mask1-2-1">温馨提示</p>
        <p>{{ errMsg }}</p>
      </div>
    </div>
    <div v-if="!loadEnd" class="mask1-1">
      <u-loading-icon size="50"></u-loading-icon>
    </div>
    <div v-show="!mask1 && loadEnd">
      <div class="part1">
        <img class="img" src="./img1/a16.png" alt="" />
        <img class="img1" src="./img1/a13.png" alt="" />
        <img class="img2" src="./img1/a14.png" alt="" />
      </div>
      <div class="part2">好礼抽奖转不停</div>
      <div class="part3">
        <div class="part31" @click="alertEl1 = true">
          <span>活动规则</span>
        </div>
        <div class="part32" @click="alertEl4 = true">
          <span>中奖记录</span>
        </div>
      </div>
      <div id="stage">
        <div class="stage3">
          <img class="img4" src="./img1/a22.png" alt="" />
          <img class="img5" src="./img1/a19.png" alt="" />
          <img class="img1" src="./img1/a11.png" alt="" />
          <img class="img2" src="./img1/a17.png" alt="" />
          <img class="img3" src="./img1/a18.png" alt="" />
        </div>
      </div>
      <div class="part4" @click="alertEl3 = true">隐私政策</div>
      <div class="part5" v-show="alertEl1" @click="alertEl1 = false">
        <div class="part51" @click.stop>
          <div class="part51T">活动规则</div>
          <div class="part511">
            <p>
              1、立减金有效期为30天，只在工银借记卡绑定微信支付达到立减金金额时可使用，请及时领取使用，过期概不补发或退换。
            </p>
            <p>
              2、立减金可在微信卡包中查询，如立减金已过期或已核销则无法在以上路径查询。客户可在“微信支付”公众号中查看领取日消息记录及券码详情，或在：微信-我-卡包-常见问题-历史卡券列表中查看。
            </p>
            <p>
              3、享受微信立减金优惠的订单，如发生全额退款，仅退还客户订单实际支付金额，立减金如在有效期内则退回给客户继续使用，退回的立减金若已过有效期则无法使用，且不予补发；如发生部分退款，则按比例退还客户订单实际支付的金额，因立减金已使用且不可拆分不找零，不支持退回客户微信卡包。
            </p>
            <p>
              4、如客户由于自身工银借记卡额度不足、卡被冻结、或自身电子设备系统问题等而导致无法使用红包，请客户使用前确认自己的工银借记卡有可用额度且卡片状态正常。
            </p>
            <p>
              5、客户可通过在微信支付账单详情中，查看本次交易的交易方式：单号10000开头为转账交易，不可使用立减金；单号42000开头为商业支付，可使用立减金。
            </p>
            <p>
              6、活动中，立减金中奖页面请勿转发朋友圈或他人，否则由此造成的后果由用户自行承担。同时用户如出现违反国家法律法规、《微信支付服务协议》或以不正常手段参与活动，将取消用户活动资格并追究法律责任。
            </p>
            <p>7、如有疑问，欢迎联系云管家微信公众号客服咨询。</p>
            <p>该活动解释权归工银江苏金融云管家所有。</p>
          </div>
          <div class="part512" @click="alertEl1 = false">
            <img src="./img1/a6.png" alt="" />
          </div>
        </div>
      </div>
      <div class="part5" v-show="alertEl3" @click="alertEl3 = false">
        <div class="part51" @click.stop>
          <div class="part51T">隐私政策</div>
          <div class="part511">
            <p>本系统平台不记录与利用用户任何信息，用户信息均归合作行方所有。</p>
          </div>
          <div class="part512" @click="alertEl3 = false">
            <img src="./img1/a6.png" alt="" />
          </div>
        </div>
      </div>
      <div class="part5" v-show="alertEl2" @click="alertEl2 = false">
        <div class="part52" @click.stop>
          <div class="part521">
            <p>恭喜您获得</p>
            <p class="part5211"><span class="part52111">￥</span>{{ luckInfoYuan[prizeNo] }}</p>
          </div>
          <div class="part522" @click="alertEl2 = false">关闭</div>
        </div>
      </div>
      <div class="part5" v-show="alertEl4" @click="alertEl4 = false">
        <div class="part51" @click.stop>
          <div class="part51T">中奖记录</div>
          <div class="part511">
            <div class="part511-emt" v-if="!luckList.length">暂无记录</div>
            <div class="part513" v-for="(item, index) in luckList" :key="index">
              <img class="part5132" src="./img1/a91.png" alt="" />
              <div class="part5131">
                <p>{{ item.sysGood.name }}</p>
                <p>
                  <span>{{ item.sysGood.updateTime }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="part512" @click="alertEl4 = false">
            <img src="./img1/a6.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import $utils from '../../utils'
import TurnGame from './game'

export default {
  data() {
    return {
      door1: true,
      alertEl1: false,
      alertEl2: false,
      alertEl3: false,
      alertEl4: false,
      gameData: null,
      luckInfoYuan: {},
      mask1: true,
      errMsg: '',
      prizeNo: 0,
      luckList: [],
      loadEnd: false,
    }
  },
  created() {
    window.addEventListener('load', () => {
      this.loadEnd = true
    })
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: '三方存管 幸运大转盘',
    })

    // localStorage.param = '4DMMuTOr96qMYdSWGFXL7/6B3+sCfwilY5JfwignGPLynCXhOwU/Ay9X9RAqvpNa87S7weWGrwAPrcJGfT2BCSoDzU7S6KFSRU7vHWeRiMk='
    // localStorage.sign =
    //   'ERTCIMQszlL2YSwewy9ZcAGWvuEbN4pNmRpnDn7lzPvY1FQGkFSMs//SfG4k/3F6FDeZAu/6XbHekOkbtL2cA+GTG+HXs+1era+FKvKMn+tlw9LaaQhNpg4B/Q+T19uxVLFjojVSDMWoNhWc8WPsMQDFUgHPFk7YHb87lNOoGuVbCvivv95P49U12BIAhHNWQTHdD+eeiDdEQJJoA/WluT45KrEXjiN52ouefIZrdtYKt+m1+ZIjvD+KaeS0Br6qtf7SP1DT7yitdnL7XRe4RLYyh7G3AOVu+Urg6dkziDDxPaHWaFYGyaFiB1ra7qzqwBX88UUjARzKcX/jjp3u9A=='
    // localStorage.WECHAT_MYDDZP_USER = 'or5NFwq8CQSgyIiUcileg9_n_lyU'

    let param = localStorage.getItem('param')
    let sign = localStorage.getItem('sign')
    let openId = localStorage.getItem('WECHAT_MYDDZP_USER')

    if (openId && param && sign) {
      this.mask1 = false
    } else {
      this.mask1 = true
      this.errMsg = '活动参数错误'
      return
    }
    let temp = parseInt(this.$moment(new Date(), 'yyyyMMDD'))
    if (temp >= 20220107 && temp <= 20220120) {
      this.mask1 = false
    } else {
      this.mask1 = true
      this.errMsg = '不在活动时间范围内'
      return
    }

    this.luckInfoYuan = {
      '0': 20,
      '1': 40,
      '2': 50,
      '3': 100,
      '4': 200,
      '5': 0,
      '6': 1,
    }

    let obj = {
      prizeList: [
        {
          name: '20元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '40元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '50元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '100元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '200元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '1元立减金',
          img: require('./img1/a9.png'),
        },
        {
          name: '谢谢参与',
          img: require('./img1/a15.png'),
        },
      ],
      cPlayImg: require('./img1/a20.png'),
      prizeNo: 5,
      width: window.innerWidth * 0.8,
      height: window.innerWidth * 0.8,
      el: document.querySelector('#stage'),
      vue: this,
    }

    if (obj.prizeNo) {
      this.prizeNo = obj.prizeNo
    }

    const reLoad = () => {
      if (this.gameData) {
        this.gameData.stop()
      }
      this.gameData = null
      this.gameData = new TurnGame(obj)
      this.gameData.init()
    }

    reLoad()
    this.luck_list()
  },
  methods: {
    luck_list() {
      this.$api.satisfaction.luck_list().then((res) => {
        this.luckList = res.rows
      })
    },
    turnPlay() {
      if (this.door1) {
        this.door1 = false
        this.getLuck()
        // this.prizeNo = 1
        // this.gameData.playGame()
      }
    },
    getLuck() {
      this.$api.satisfaction
        .getLuck({
          openId: localStorage.getItem('WECHAT_MYDDZP_USER'),
        })
        .then((res) => {
          if (res.data.name) {
            this.prizeNo = 5
            let num = res.data.name
            if (num.includes('20元')) {
              this.prizeNo = 0
            } else if (num.includes('40元')) {
              this.prizeNo = 1
            } else if (num.includes('50元')) {
              this.prizeNo = 2
            } else if (num.includes('100元')) {
              this.prizeNo = 3
            } else if (num.includes('200元')) {
              this.prizeNo = 4
            } else if (num.includes('1元')) {
              this.prizeNo = 6
            }
            this.gameData.playGame()
          }
        })
        .catch((err) => {
          this.door1 = true
          uni.showModal({
            title: '提示',
            content: err.msg || '活动太火爆了，请稍后再试',
            showCancel: false,
            success: function(res) {
              if (res.confirm) {
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            },
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.turnTable {
  background: url('./img1/bg.png') 0% 0% no-repeat;
  background-size: 100%;
  min-height: 100vh;
  background-color: #ffc368;
  .mask1-1 {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    .mask1-2 {
      width: 610rpx;
      background-color: #fff;
      border-radius: 16rpx;
      text-align: center;
      padding-bottom: 60rpx;
      overflow: hidden;
    }
    .mask1-2-1 {
      margin-bottom: 60rpx;
      padding: 20rpx 0;
      color: #fff;
      background: #f60;
    }
  }
  .part1 {
    padding-top: 108rpx;
    text-align: center;
    margin-bottom: 24rpx;
    .img {
      width: 589rpx;
      height: 127rpx;
    }
    .img2 {
      position: fixed;
      bottom: 16rpx;
      left: -38rpx;
      width: 209rpx;
      height: 369rpx;
      z-index: 10;
    }
    .img1 {
      position: fixed;
      bottom: 16rpx;
      right: -38rpx;
      width: 197rpx;
      height: 421rpx;
      z-index: 10;
    }
  }
  .part2 {
    width: 390rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 32rpx;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 30rpx;
    margin: 0 auto;
    text-align: center;
    border: 2rpx solid rgba(255, 255, 255, 0.39);
    margin-bottom: 123rpx;
  }
  .part3 {
    position: fixed;
    right: 0;
    top: 174rpx;
    z-index: 200;
    span {
      display: inline-block;
      width: 24rpx;
      padding-left: 22rpx;
    }
    .part31 {
      width: 57rpx;
      height: 176rpx;
      color: #c55a13;
      font-size: 24rpx;
      background: url('./img1/a3.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
    .part32 {
      width: 57rpx;
      height: 176rpx;
      color: #fff;
      font-size: 24rpx;
      background: url('./img1/a2.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
    }
  }
  #stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 732rpx;
    position: relative;
    .stage3 {
      img {
        position: absolute;
      }
      .img1 {
        width: 218rpx;
        height: 47rpx;
        top: 24rpx;
        left: 50%;
        transform: translateX(-50%);
      }
      .img3 {
        width: 49rpx;
        height: 218rpx;
        top: 50%;
        left: 24rpx;
        transform: translateY(-50%);
      }
      .img2 {
        width: 49rpx;
        height: 218rpx;
        top: 50%;
        right: 24rpx;
        transform: translateY(-50%);
      }
      .img4 {
        width: 518rpx;
        height: 155rpx;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
      .img5 {
        width: 652rpx;
        height: 652rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .part4 {
    text-align: center;
    text-decoration: underline;
    text-align: center;
    color: #9e6b19;
    line-height: 40rpx;
    font-size: 28rpx;
    padding-top: 49rpx;
  }
  .part5 {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    .part51 {
      width: 610rpx;
      height: 850rpx;
      background: url('./img1/a1.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .part51T {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30rpx;
        top: 60rpx;
        color: #fff;
      }
      .part511 {
        width: 500rpx;
        height: 572rpx;
        overflow: hidden;
        overflow-y: auto;
        font-size: 28rpx;
        padding-right: 20rpx;
        line-height: 44rpx;
        color: #333;
      }
      .part511-emt {
        font-size: 28rpx;
        padding-top: 272rpx;
        text-align: center;
        color: #333;
      }
      .part512 {
        position: absolute;
        bottom: 0;
        width: 44rpx;
        height: 44rpx;
        margin: 0 auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .part513 {
        display: flex;
        align-items: center;
        background: rgba(255, 145, 48, 0.1);
        width: 460rpx;
        padding: 20rpx 30rpx;
        .part5132 {
          width: 153rpx;
          height: 87rpx;
        }
        .part5131 {
          font-size: 28rpx;
          margin-left: 40rpx;
          color: #ff9130;
          span {
            font-size: 24rpx;
            line-height: 24rpx;
            color: #ff9130;
          }
        }
      }
    }
    .part52 {
      width: 610rpx;
      height: 636rpx;
      background: url('./img1/a10.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .part521 {
        padding-top: 78rpx;
        height: 308rpx;
        color: #bf7238;
        font-size: 32rpx;
        line-height: 44rpx;
        .part5211 {
          font-size: 50rpx;
          line-height: 100rpx;
          color: #ff1f30;
        }
        .part52111 {
          font-size: 32rpx;
        }
      }
      .part522 {
        width: 528rpx;
        height: 98rpx;
        line-height: 98rpx;
        background: url('./img1/a4.png') no-repeat;
        background-size: 100% 100%;
        margin: 0 auto;
        color: #ff1f30;
        font-size: 32rpx;
        margin-top: 60rpx;
      }
    }
  }
}
</style>
